<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 工具栏组件 -->
      <el-row type="flex" justify="space-between">
        <div class="left">
          <el-button>添加房产</el-button>
        </div>
        <div class="right">
          <el-col :span="12">
            <!-- <span class="demonstration">click 激活</span> -->
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                全部分类<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
                <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

          </el-col>
          <el-col :span="12">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                全部经纪<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
                <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

          </el-col>
          <el-input placeholder="请输入关键字" />
          <el-button>筛选</el-button>
        </div>
      </el-row>
      <hr>
      <!-- 表格 -->
      <el-card>
        <el-table :data="employeeList">
          <el-table-column label="封面" width="100px">
            <template v-slot="{$index}">
              {{ $index+1 }}
            </template>
          </el-table-column>
          <el-table-column label="标题" prop="username" />
          <el-table-column label="标签" prop="staffPhoto" width="140px">
            <template v-slot="{}">
              <img>
            </template>
          </el-table-column>
          <el-table-column label="地址" prop="mobile" />
          <el-table-column label="分类" prop="workNumber" />

          <el-table-column
            label="经纪"
            prop="formOfEmployment"
            :formatter="formatFormOfEmployment"
          />
          <el-table-column label="价格" prop="departmentName" />
          <el-table-column label="介绍" prop="timeOfEntry">
            <template v-slot="{row}">
              <!-- {{ formatDate(row.timeOfEntry) }} -->
              {{ row.timeOfEntry | formatDate }}
            </template>
          </el-table-column>
          <!-- 状态：值为1 表示 当前账号是可用状态
                      值为0 表示 当前账号是不可用状态
             -->
          <el-table-column label="图片" prop="enableState">
            <template v-slot="{row}">
              <!--
                  value设置当前表单的值，默认绑定布尔值
                  active-color：设置选中状态的背景颜色
                  inactive-color：设置未选中状态的背景颜色
                  active-value：设置选中状态的值  --- 可以是数字 字符串 布尔值
                  inactive-value：设置未选中状态的值  --- 可以是数字 字符串 布尔值
                 -->
              <el-switch
                :value="row.enableState"
                active-color="green"
                inactive-color="#dcdfe6"
                :active-value="1"
                :inactive-value="0"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200px">
            <template v-slot="{row}">
              <el-button type="text" @click="toDetail(row.id)">查看</el-button>
              <el-button type="text" @click="assignRole(row.id)">角色</el-button>
              <el-button type="text" @click="delFn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-row type="flex" justify="center">
          <el-pagination
            :page-size="size"
            layout="total, prev, pager, next"
            :total="total"
            @current-change="currentChange"
          />
        </el-row>
      </el-card>

    </div>
  </div>
</template>

<script>

</script>

  <style lang="scss" scoped>
.right{
    display: flex;

}
.app-container{
    >.el-row{
        margin-bottom: 50px;
    }
}
.el-dropdown{
    border: 1px solid #dcdfe6;
    height: 40px;
    line-height: 40px;
    border-radius: 3px;
    margin-right: -16px;
}
.left{
    >.el-button{
        background-color: #409eff;
        color: #fff;
    }
}
  </style>

